<!-- 评价商品 -->
<template>
	<view class="content page">
		<status-bar title='提交评论'></status-bar>
		<view v-if='pageData'>
			<!-- 商品信息 -->
			<view class="commetItem" v-for="(item1,index1) in pageData.goodsData" :key='index1'>
				<view class="flex-box align-center goodsBox">
					<image class="goodsImg radius" @error="item1.goods_img =''"
						:src="item1.goods_img?$imgUrls(item1.goods_img): staticUrl+'/images/imageLoading.png'"
						mode="aspectFill"></image>
					<view class="txt flex">
						<view class="thmeTxt lines">
							{{item1.goods_name}}
						</view>
						<view class="myPrice">
							{{item1.price}}
						</view>
						<view class="specsBox" v-if='item1.operation_text'>
							<text class="txt">{{item1.operation_text}}</text>
						</view>
						<view class="specsBox" v-else>
							<text class="goods_num">x {{item1.goods_num}}</text>
						</view>
					</view>
				</view>
				<!-- 商品相符 -->
				<view class="flex-box similar-box align-center">
					<text>{{ goodsName }}相符</text>
					<view class="flex-box align-center face-box flex" v-if='CommentConfig.mode == 1'>
						<view>
							<view class="img-box" @click="comments[index1].star = 5">
								<text class="iconfont icon-Fill1" :class="{ thmeColor: comments[index1].star == 5 }"
									:style="{'--color': color}"></text>
								<image :src="staticUrl+'/images/jh_up/icon-2003.png'" class="icon-face"></image>
							</view>
							<view class="txt" :class="{show: comments[index1].star == 5}">超赞</view>
						</view>
						<view>
							<view class="img-box" @click="comments[index1].star = 3">
								<text class="iconfont icon-Fill1" :class="{ thmeColor: comments[index1].star == 3 }"
									:style="{'--color': color}"></text>
								<image :src="staticUrl+'/images/jh_up/icon-2001.png'" class="icon-face"></image>
							</view>
							<view class="txt" :class="{show: comments[index1].star == 3}">良好</view>
						</view>
						<view>
							<view class="img-box" @click="comments[index1].star = 1">
								<text class="iconfont icon-Fill1" :class="{ thmeColor: comments[index1].star == 1 }"
									:style="{'--color': color}"></text>
								<image :src="staticUrl+'/images/jh_up/icon-2002.png'" class="icon-face"></image>
							</view>
							<view class="txt" :class="{show: comments[index1].star == 1}">一般</view>
						</view>
					</view>
					<view class="flex-box align-center starBox" v-if='CommentConfig.mode == 2'>
						<view class="stars">
							<block v-for="(item,index2) in score" :key='index2'>
								<text @click="staring(index2,index1)" v-if='index2<comments[index1].star'
									class="iconfont icon-xingxing thmeColor" :style="{'--color': color}"></text>
								<text @click="staring(index2,index1)" v-else class="iconfont icon-xingxing gray"></text>
							</block>
						</view>
						<text class="thmeInfo">{{score[comments[index1].star-1]}}</text>
					</view>
				</view>
				<!-- 标签 -->
				<view class="tags-box flex-box" v-if='CommentConfig && CommentConfig.label'>
					<view class="tag_ flex-box align-center" @click="tagCheck(i_,index1,tt.id)" :class="{
						active: comments[index1].label_temp[i_]
					}" v-for='(tt,i_) in CommentConfig.label' :key='i_' :style="{'--color': color}">
						<text>{{ tt.title }}</text>
						<view class="img-box">
							<text class="iconfont icon-Fil2l1"></text>
							<image :src="staticUrl+'/images/jh_up/icon-2003.png'" class="icon-face"></image>
						</view>
					</view>
				</view>
				<!-- 评论框 、上传照片-->
				<view class="comBox">
					<textarea v-model="comments[index1].comment_word" class="radius" placeholder-class="thmeInfo"
						:placeholder="CommentConfig.defaultText?CommentConfig.defaultText:'写下你的评价, 你的评价可以帮助到其他买家哦~'" />
					<view class="imagesList flex-box">
						<view v-if='comments[index1].imgEn' class="chooseBox" @click="selectImage(index1)">
							<image :src="staticUrl+'/images/jh_up/icon-2004.png'" class="icon"></image>
							<view>上传照片</view>
						</view>
						<view class="img-box"
							v-if='comments[index1].comment_pic1 && comments[index1].comment_pic1.length>0'
							v-for="(item,index3) in comments[index1].comment_pic1" :key="index3">
							<text :style="{'--color': color}" class="icon-close-f iconfont delImg thmeColor"
								@click="del(index1,index3)"></text>
							<image class="upImg" :src="item" mode="aspectFill"></image>
						</view>
					</view>

				</view>



				<view class="flex-box flex-between see-box">
					<view class="flex-box align-center" @click="anonymous(index1)">
						<!-- <template v-if='comments[index1].anonymous == 0'>
							<text class="iconfont icon-yanjing1"></text>
							<text class="icon-yanjing1-txt">公开</text>
						</template>
						<template  v-if='comments[index1].anonymous == 1'>
							<text class="iconfont icon-Close"></text>
							<text class="icon-Close-txt">匿名</text>
						</template> -->
						<text class="check-box flex-box flex-center align-center">
							<text v-if='comments[index1].anonymous == 1' class="iconfont icon-xuanzhong thmeColor"
								:style="{'--color': color}"></text>
						</text>
						<text>是否匿名</text>
					</view>
					<view class="see-txt">
						用户昵称/头像其他买家{{comments[index1].anonymous == 1?'不':''}}可见
					</view>
				</view>

			</view>

			<!-- 其他评价 -->
			<view class="other-star" v-if='CommentConfig && CommentConfig.service'>
				<view class="title">其他评价</view>
				<view class="flex-box align-center starBox" v-for="(itm,ii) in CommentConfig.service" :key='ii'>
					<text class="Txt">{{ itm.title }}</text>
					<view class="stars">
						<block v-for="(item,index2) in score" :key='index2'>
							<text @click="otherStar(ii,index2,1)" v-if='index2<itm.num'
								class="iconfont icon-xingxing thmeColor" :style="{'--color': color}"></text>
							<text @click="otherStar(ii,index2,2)" v-else class="iconfont icon-xingxing gray"></text>
						</block>
					</view>
					<text class="thmeInfo">{{itm.num}}分</text>
				</view>
			</view>

			<view class="myBtn thmeBg radius" :style="{'--color': color}" @click="submit">
				<text>提交</text>
			</view>
		</view>
		<view v-else class="DiLine">
			{{ errMsg }}
		</view>
	</view>
</template>

<script>
	var that
	export default {
		data() {
			return {
				color: getApp().globalData.color,
				vid: uni.getStorageSync('vid'),
				showloading: true,
				staticUrl: this.staticUrl,
				selectImages: false,
				imgs: [],
				currIndex: 4,
				score: [
					'很差',
					'一般',
					'比较满意',
					'非常满意',
					'无可挑剔',
				],
				loadingNow: false,
				pageData: '',
				comments: [],
				imgLength: 9, // 图片上限


				goodsName: uni.getStorageSync('startUp').nameDefinition.goodsName,
				CommentConfig: '',
				errMsg: '',
				// comments: [{
				// 	goods_name: '',
				// 	goods_id: '',
				// 	star: 1,
				// 	comment_word: "",
				// 	comment_pic1: [], // 临时路径
				// 	comment_pic: [], // 临时路径
				// 	imgs:[] ,// 最后要上传的图片
				// 	imgEn: true,// 当前条是否可以继续上传
				// 	anonymous:0 //是否匿名
				// }],
				// pageData:{
				// 	goodsData:[
				// 		{
				// 			goods_img:'Uploads/Member_img201611/7433/6032/202101/1609925083665.jpg',goods_name:'商品名称',price:'9.9',operation_text:"红色",goods_num:'22'

				// 		}
				// 	]
				// }

			}
		},
		onLoad(e) {
			that = this;
			that.orderId = e.oid;
			that.getConfig()

		},
		onShareAppMessage(res) {
			let shareData = uni.getStorageSync('shareData');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index',
				imageUrl: shareData.imageUrl
			}
		},
		onShareTimeline(item) {
			let shareData = uni.getStorageSync('shareData');
			return {
				title: shareData.desc,
				query: {
					test: 1
				},
				imageUrl: shareData.imageUrl
			}
		},
		methods: {
			getConfig() {
				that.$http.get({
					url: '/singleSaleApi/getCommentConfig',
					data: {
						bid: uni.getStorageSync('bid')
					}
				}).then(res => {
					if (res.code == 100 && res.data) {
						if (res.data.service) {
							res.data.service.forEach(item => {
								item.num = 1
							})
						}
						that.CommentConfig = res.data
					}
					that.getDetail()
				})
			},
			otherStar(index, score, type) {
				if (type == 1) {
					that.CommentConfig.service[index].num = score > 1 ? score : 1
				} else {
					that.CommentConfig.service[index].num = score + 1
				}
				that.CommentConfig.service = [].concat(that.CommentConfig.service)
			},
			tagCheck(i, index1, id) {
				that.comments[index1].label_temp[i] = that.comments[index1].label_temp[i] ? '' : id
				that.comments[index1].label_temp = [].concat(that.comments[index1].label_temp)
				that.comments = [].concat(that.comments)
				console.log(that.comments)
			},
			async comment() {
				uni.showLoading({
					title: '提交中···'
				})
				// 上传图片
				for (let item1 of that.comments) {
					item1.label = []
					item1.label_temp.forEach(lab => {
						if (lab) {
							item1.label.push(lab)
						}
					})
					if (item1.comment_pic1.length > 0) {
						for (let item of item1.comment_pic1) {
							await that.$common.uploadFile('/zzjApp/uploade?bid=' + uni.getStorageSync('bid'), item, 1)
								.then(res2 => {
									var data = res2;
									if (typeof res2 == 'string') {
										data = JSON.parse(data)
									}
									if (data.errcode == 100) {
										var imgItem = data.url;
										imgItem = imgItem.substring(22, imgItem.length);
										item1.imgs.push(imgItem);
									} else {
										uni.showToast({
											icon: 'none',
											title: data.msg + '!',
											duration: 2000
										})
									}
								})
						}
					}
				}
				for (let i in that.comments) {
					that.comments[i].label = that.comments[i].label.join(',')
					if (that.comments[i].imgs) {
						that.comments[i].comment_pic = that.comments[i].imgs.join(',')
					}
				}
				var jsonStr = JSON.stringify(that.comments);
				let service = ''
				if (that.CommentConfig && that.CommentConfig.service) {
					service = JSON.stringify(that.CommentConfig.service)
				}
				that.$http.post({
					url: '/singleSaleApi/comment',
					data: {
						order_code: that.pageData.order_code,
						comment: jsonStr, // 数组
						service: service // JSON数组  不能为空  [{"id":1,"num":5},{"id":1,"num":5},{"id":1,"num":5},{"id":1,"num":5}]
					}
				}).then(res => {
					if (res.errcode != 100) return that.$Toast(res.msg)
					uni.navigateTo({
						url: '/orderPage/order/receiptSuccess?oid=' + that.pageData.order_id +
							'&btnType=1'
					})
				})
			},
			staring(star_num, index1) {
				that.comments[index1].star = star_num + 1;
			},
			getDetail() {
				/**
				 * 单商品特价订单详情
				 * **/
				that.$http.post({
					url: '/zzj_singleSaleApi/orderSingleDetails',
					data: {
						order_id: that.orderId,

					}
				}).then(res => {
					if (res.errcode == 100) {
						that.pageData = res.data;
						let lab = []
						if (that.CommentConfig && that.CommentConfig.label) {
							that.CommentConfig.label.forEach(item => {
								lab.push('')
							})
						}
						if (that.pageData.goodsData) {
							for (let i in that.pageData.goodsData) {
								lab = [].concat(lab)
								var obj = {
									goods_name: that.pageData.goodsData[i].goods_name + that.pageData
										.goodsData[i].specs_bind_text,
									goods_id: that.pageData.goodsData[i].goods_id,
									star: 5,
									comment_word: "",
									comment_pic1: [], // 临时路径（未上传）
									comment_pic: [], // 上传后的路径
									imgs: [], // 最后要上传的图片
									imgEn: true, // 当前条是否可以继续上传
									anonymous: 0, //是否匿名
									label_temp: lab, // 标签
									label: '', // 标签
								}
								that.comments.push(obj)
							}
						} else {
							let arry = []
							that.pageData.price = that.pageData.goodsprice
							arry.push(that.pageData)
							that.pageData.goodsData = arry
							var obj = {
								goods_name: that.pageData.goods_name + that.pageData.specs_bind_text,
								goods_id: that.pageData.goods_id,
								star: 5,
								comment_word: "",
								comment_pic1: [], // 临时路径（未上传）
								comment_pic: [], // 上传后的路径
								imgs: [], // 最后要上传的图片
								imgEn: true, // 当前条是否可以继续上传
								anonymous: 0, //是否匿名
								label_temp: lab, // 标签
								label: '', // 标签
							}
							that.comments.push(obj)
						}
						console.log(that.comments)
					} else {
						that.errMsg = '数据获取失败！'
					}
					that.showloading = false;
				})
			},
			del(index1, index3) {
				// 删除图片
				this.$delete(this.comments[index1].comment_pic1, index3);
				this.$delete(this.comments[index1].imgs, index3);
				var len = this.comments[index1].comment_pic1.length;
				if (len < this.imgLength) {
					this.comments[index1].imgEn = true
				}
				if (len < 1) {
					this.selectImages = false;
				}
			},
			submit() {
				for (let i in that.comments) {
					if (that.comments[i].comment_word == '') {
						uni.showToast({
							title: '请补充评语~',
							icon: 'none'
						})
						return
					}
				}
				that.comment();
			},
			anonymous(index) { // 匿名
				that.comments[index].anonymous = that.comments[index].anonymous == 0 ? 1 : 0
			},

			selectImage(index) { //选择图片
				uni.chooseImage({
					count: that.imgLength,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: (res) => {
						that.selectImages = true;
						that.loadingNow = true; // 图片正在上传
						if (that.comments[index].comment_pic1.length >= that.imgLength) {
							uni.showToast({
								title: '最多可上传' + that.imgLength + '张照片哦~',
								icon: 'none'
							});
							return
						}
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							if (that.comments[index].comment_pic1.length < that.imgLength) {
								that.comments[index].comment_pic1.push(res.tempFilePaths[i])
							} else {
								that.comments[index].imgEn = false;
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		overflow-y: auto;
		background-color: #F5F5F5;
		padding: 20rpx;

		.similar-box {
			margin-top: 30rpx;

			>text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.img-box {
				.iconfont {
					font-size: 48rpx;
					color: #EEEEEE;
				}

				position: relative;

				.icon-face {
					position: absolute;
					width: 24rpx;
					height: 24rpx;
					top: 12rpx;
					left: 50%;
					margin-left: -12rpx;
				}
			}

			.face-box {
				justify-content: flex-end;

				>view {
					margin-left: 30rpx;
					text-align: center;
					margin-bottom: -10rpx;

					.txt {
						margin: -10rpx auto 0;
						font-size: 32rpx;
						transform: scale(0.5);
						color: #CCCCCC;

						&.show {
							color: #333333;
						}
					}
				}
			}
		}

		.tags-box {
			flex-wrap: wrap;

			.tag_ {
				border: 1px solid #EEEEEE;
				height: 42rpx;
				margin-right: 24rpx;
				padding: 0 14rpx;
				border-radius: 40rpx;
				margin-top: 24rpx;

				>text {
					font-size: 26rpx;
					margin-right: 8rpx;
					color: #999999;
				}

				.img-box {
					margin-top: 2rpx;

					.iconfont {
						font-size: 30rpx;
						color: #EEEEEE;
					}

					position: relative;

					.icon-face {
						position: absolute;
						width: 14rpx;
						height: 14rpx;
						top: 8rpx;
						left: 6rpx;
					}
				}

				&.active {
					border: 1px solid var(--color);

					>text {
						color: var(--color);
					}

					.img-box {
						.iconfont {
							color: var(--color);
						}
					}
				}
			}
		}

		.commetItem {
			margin-bottom: 40rpx;
			border-radius: 16rpx;
			padding: 24rpx;
			background-color: #FFFFFF;

			.goodsBox {
				.goodsImg {
					width: 116rpx;
					height: 116rpx;
					margin-right: 20rpx;
				}

				.specsBox {
					margin-top: 6rpx;

					.goods_num {
						color: #999999;
					}
				}

				.myPrice {
					color: $uni-color-price;
					font-size: 30rpx
				}
			}

			.comBox {
				margin-top: 30rpx;

				textarea {
					font-size: 24rpx;
					width: 100%;
					height: 150rpx;
					background-color: #F9F9F9;
					padding: 20rpx;
					box-sizing: border-box;
				}

				.imagesList {
					padding: 20rpx 0 0 0;
					flex-wrap: wrap;
					margin-right: -20rpx;
					margin-bottom: -20rpx;

					.chooseBox {
						width: 122rpx;
						height: 122rpx;
						position: relative;
						margin-bottom: 20rpx;
						margin-right: 20rpx;
						background-color: #F5F5F5;
						border-radius: 8rpx;
						text-align: center;
						padding-top: 20rpx;

						view {
							color: #999999;
							font-size: 22rpx;
							margin-top: 10rpx;
						}

						.icon {
							width: 46rpx;
							height: 36rpx;
						}
					}

					.img-box {
						width: 122rpx;
						height: 122rpx;
						margin-bottom: 20rpx;
						margin-right: 20rpx;
						position: relative;

						.upImg {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}

						.delImg {
							position: absolute;
							z-index: 2;
							top: -6rpx;
							right: -6rpx;
							border-radius: 50%;
							font-size: 24rpx;
							width: 24rpx;
							height: 24rpx;
							background-color: #FFFFFF;
						}
					}
				}

			}
		}

		.other-star {
			margin-top: 10rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.starBox {
				margin-top: 20rpx;
			}
		}

		.starBox {
			.Txt {
				font-size: 28rpx;
				color: #333333;
				padding-right: 36rpx;
			}

			.stars {
				position: relative;
				top: 2rpx;

				.iconfont {
					padding: 0 4rpx;
					font-size: 34rpx;
				}

				.gray {
					color: #EEEEEE !important;
				}
			}

			.thmeInfo {
				color: #666666;
				margin-left: 20rpx;
			}
		}

		// 匿名
		.see-box {
			margin-top: 20rpx;

			// .iconfont{
			// 	font-size: 36rpx;
			// 	padding-right: 10rpx;
			// }
			// .icon-yanjing1,.icon-yanjing1-txt{
			// 	color: $uni-color-star;
			// }
			// .icon-Close,.icon-Close-txt{
			// 	color: #999999;
			// }
			// .see-txt{
			// 	color: #333;
			// }
			.check-box {
				width: 24rpx;
				height: 24rpx;
				border-radius: 4rpx;
				border: 2rpx solid #999999;
				margin-right: 10rpx;

				.iconfont {
					font-size: 24rpx;
					font-weight: bold;
				}
			}

			text {
				font-size: 28rpx;
			}
		}

		.myBtn {
			text-align: center;
			border-radius: 88rpx;
			width: 480rpx;
			margin: 60rpx auto 0;

			text {
				font-size: 28rpx;
				text-align: center;
				height: 88rpx;
				line-height: 88rpx;
				color: white;
			}
		}
	}
</style>